/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, BlobInputList, InputLine, Table, TableBody, TableRow, Cell, useTheme,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useInputControlSure,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {EditStorageContext} from "../../StorageContext";
import {useUppyUpload} from "../../hook/useUppyUpload";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

//锅炉简图
export const itemA简图=['简图说明','_FILE_S简图',];
export const BoilerDiagram =
React.forwardRef((
    {children, show, alone = true, refWidth, label,repId}: InternalItemProps, ref
) => {
    const {modified,setModified,} =React.useContext(EditStorageContext) as any;
    const [getInpFilter] = useMeasureInpFilter(null, itemA简图, );
    const {inp, setInp,onSure} = useInputControlSure({ ref, });
    const onFinish = React.useCallback(async(upfile: any, del:boolean) => {
        onSure({...inp, '_FILE_S简图': upfile});
        !modified && setModified(true);
    }, [inp, modified,onSure,setModified]);
    const [uploadDom]=useUppyUpload({ repId:repId!,
        maxFile:5, onFinish, storeObj: inp?._FILE_S简图
    });
    return (
        <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                             alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            <InputLine label='锅炉简图说明：'>
                <BlobInputList value={inp?.简图说明 || ''} rows={2} datalist={[ ]}
                               onListChange={v => setInp({...inp, 简图说明: v || undefined}) } />
            </InputLine>
            锅炉简图：
            {uploadDom}
            {children}
        </InspectRecordLayout>
    );
});
export const BoilerDiagramVw= ({ orc, rep,title='1.2锅炉结构简图', children} : { orc: any,rep: any,title?:string,children?: React.ReactNode}
) => {
    const theme= useTheme();
    return <>
        <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
            <Text id='BoilerDiagram' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>{title}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text>工程名称：{orc?.工程名称}</Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["62%","%"]  }   css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'BoilerDiagram'}>
                    <TableRow>
                        <Cell colSpan={2} split={true} css={{"@media print": {height: undefined}, padding: 0}}>
                            {orc.简图说明 &&
                                <div css={{whiteSpace: 'pre-wrap'}}>
                                    {orc.简图说明 || '／'}
                                </div>
                            }
                            {!(orc?._FILE_S简图?.length>0) && !orc.简图说明 && <Text css={{textAlign: 'center',display:'block'}}>空的，进入上传吧</Text>}
                            {orc?._FILE_S简图?.map(({name, url}: any, i: number) => {
                                return <div key={i} css={{"@media print": {pageBreakInside: 'avoid' } }}>
                                    {i>0 && <hr/>}
                                    <div css={{display: 'flex',justifyContent: 'space-around',alignItems: 'center',}}>
                                        { url &&
                                            <img src={process.env.REACT_APP_OSS_ENDP+url} alt={url}
                                                 css={{
                                                     maxHeight: '14cm',
                                                     maxWidth: '-webkit-fill-available',
                                                     [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                                                     "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                                                 }}
                                            />
                                        }
                                    </div>
                                </div>
                            }) }
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} cap='监检' href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
